---
title: Svelte Component Testing
description: Learn how to set up component tests in Svelte, configure Cypress for Svelte projects, and test Svelte components with Vite and a custom Webpack config.
sidebar_position: 10
sidebar_label: Overview
---

<ProductHeading product="app" />

# Svelte Component Testing

:::info

##### <Icon name="question-circle" color="#4BBFD2" /> What you'll learn

- How to set up component tests in Svelte
- How to configure Cypress for Svelte projects
- How to test Svelte components with Vite and a custom Webpack config

:::

## Framework Support

Cypress Component Testing supports Svelte 5 in a variety of different
frameworks:

- [Svelte with Vite](#Svelte-with-Vite)
- [Svelte with Webpack](#Svelte-with-Webpack)

:::caution

Svelte is currently in alpha support for component testing.

:::

## Tutorial

Visit the
[Getting Started Guide](/app/component-testing/get-started) for a
step-by-step tutorial on adding component testing to any project and how to write your first tests.

## Installation

To get up and running with Cypress Component Testing in Svelte, install Cypress
into your project:

<CypressInstallCommands />

Open Cypress:

<CypressOpenCommands />

<DocsImage
  src="/img/app/component-testing/select-test-type.jpg"
  caption="Choose Component Testing"
/>

The Cypress Launchpad will guide you through configuring your project.

:::info

For a step-by-step guide on how to create a component test, refer to the
[Getting Started](/app/component-testing/get-started) guide.

For usage and examples, visit the
[Svelte Examples](/app/component-testing/svelte/examples) guide.

:::

## Framework Configuration

Cypress Component Testing works out of the box with [Vite](https://vitejs.dev/),
and a custom [Webpack](https://webpack.js.org/) config. Cypress will
automatically detect one of these frameworks during setup and configure them
properly. The examples below are for reference purposes.

### Svelte with Vite

Cypress Component Testing works with Svelte apps that use Vite 4+ as the
bundler.

#### Vite Configuration

:::cypress-config-example

```ts
{
  component: {
    devServer: {
      framework: 'svelte',
      bundler: 'vite',
    },
  },
}
```

:::

#### Svelte Vite Sample Apps

- [Svelte 5 Vite 6 with Typescript](https://github.com/cypress-io/cypress-component-testing-apps/tree/main/svelte-vite-ts)

### Svelte with Webpack

Cypress Component Testing works with Vue apps that use Webpack 4+ as the
bundler.

#### Webpack Configuration

:::cypress-config-example

```ts
import webpackConfig from './webpack.config'
```

```ts
{
  component: {
    devServer: {
      framework: 'svelte',
      bundler: 'webpack',
      // optionally pass in webpack config
      webpackConfig,
    },
  },
}
```

:::

If you don't provide one, Cypress will try to infer your webpack config. If
Cypress cannot or you want to make modifications to your config, you can pass it
in manually via the `webpackConfig` option.

#### Svelte Webpack Sample Apps

- [Svelte 5 Webpack 5 with Typescript](https://github.com/cypress-io/cypress-component-testing-apps/tree/main/svelte-webpack-ts)
